<template>
  <view class="set-nikeName">
    <view class="nick">
      <text>设置昵称</text>
    </view>
    <view class="content">
      <view class="name_nodes">
        4-20个字符，可由中英文、数字组成
      </view>
      <input type="text" class="name_input" placeholder="请输入您的名字" v-model="userName">
      <view class="line"></view>
      <view class="uni-padding-wrap uni-common-mt">
        <button type="primary" @click="PrimaryClick">确定</button>
      </view>
    </view>

  </view>
</template>

<script>
import formValid from '@/unit/graceChecker.js'
import {UpdateNickName, PersonalCenter} from '../../service/user/user.service.js'
export default {
  data() {
    return {
      userName:''
    }
  },
  onShow () {
    this.getUserInfo()
  },
  methods: {
    getUserInfo () {
      PersonalCenter({}, (res) => {
        if(res.status == 0){
          this.userName = res.data.nickName
        }
      })
    },
    //更改昵称
    PrimaryClick(){
      let rule = [
        {name: 'userName', checkType: 'notnull', checkRule: '',  errorMsg: '请填写昵称'},
        {name: 'userName', checkType: 'string', checkRule: '4,20',  errorMsg: '不符合限制字符长度'},
        {name: 'userName', checkType: 'reg', checkRule: '^[\u4E00-\u9FA5A-Za-z0-9]+$', errorMsg: '只能由中英文、数字组成'}
      ];
      var checkRes = formValid.check({userName: this.userName}, rule);
      if (checkRes) {
        UpdateNickName({
          id: this.userName
        },(res) => {
          if (res.status == 0) {
            uni.showToast({
              title:'更改成功！',
              icon:'none',
              success: () => {
                setTimeout(function () {
                  uni.navigateBack();
                }, 2000);
              }
            });
          } else {
            uni.showToast({
              title: res.msg,
              icon:'none'
            })
          }
        })
      } else {
        uni.showToast({ title: formValid.error, icon: "none" });
      }
      // if (this.userName == "") {
      //   uni.showToast({
      //     title:'请输入昵称',
      //     icon:'none'
      //   })
      // } else {
      //   UpdateNickName({
      //     id:this.userName,
      //   },(res) =>{
      //     if(res.status == 0){
      //       uni.showToast({
      //         title:'更改成功！',
      //         icon:'none',
      //       }),
      //       uni.navigateTo({
      //         url:'/pages/user/personalData'
      //       })
      //     }else{
      //       uni.showToast({
      //         title:'更改昵称失败！',
      //         icon:'none'
      //       })
      //     }
      //   })
      // }
    },
  }
}
</script>

<style lang="scss" scoped>
  .set-nikeName {
    height: 100vh;
    background: #FFF;
  }
  .nick {
    width: 100%;
    height: 215rpx;
    background: #FFF;

  }

  .nick text {
    display: block;
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    padding: 151rpx 0 0 102rpx;
  }

  .content {
    width: 100%;
    // height: 976rpx;
    background: #FFF;
    margin-top: 20rpx;
  }

  .name_nodes {
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(153, 153, 153, 1);
    padding: 60rpx 0 0 105rpx;
  }

  .name_input {
    margin: 40rpx 0 0 107rpx;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
  }

  .line {
    width: 564rpx;
    height: 2rpx;
    margin: 26rpx auto 111rpx;
    background: rgba(225, 225, 225, 1);
  }

  /* 下面的button按钮 */
  .uni-common-mt button {
    width: 568rpx;
    height: 70rpx;
    background: #434343;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(246, 218, 153, 1);
    margin: 0 auto;
  }

  .uni-common-mt {
    width: 100%;
  }
</style>
